<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        body{
            height:2000px;
        }
        .box{
            width:500px;
            height:500px;
            background-color:aqua;
            position:relative;
            top: 100px;
            left: 300px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color:rgb(214, 203, 130);
            position:absolute;
            top:50px;
            right:0px;
        }
    </style>
</head>
<body>
    <div>
        <p>定位 position, 随心所欲，向放哪就放在哪里。</p>
        <p>定义：position 属性指定了元素的定位类型。有相对定位（relative）、绝对定位（absolute）、固定定位（fixed）三种定位类型。</p>
        <p>其中，绝对定位和相对定位会脱离文档流。设置定位后，可以使用四个方向值进行调整位置：left、right、top、bottom。</p>
        <p style="color:red;">注：在设置定位之后，相对定位和绝对定位，是相对于具有定位的父级元素进行位置调整的，如果父级元素没有进行定位，那么会向上逐级查找，直到顶层文档（body）。</p>
        <p style="color:red;">注：在进行绝对定位时，一般需要先对该元素的父级元素进行相对定位。即在使用 absolute定位之前一般都需要进行 relative定位。</p>
        <p style="color:red;">Z-index 属性，是设置元素的堆叠顺序的。用偶更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</p>
    </div>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>